<template>
  <div>
    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '100%' }"
    >
      <van-nav-bar
        title="订单详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
      <van-tabs v-model="active">
        <van-tab title="订单详情"
          ><table style="width:1000px">
            <tbody>
              <tr>
                <td width="120px">产品编码</td>
                <td width="200px">客户名称</td>
                <td width="100px" style="text-align: right">订单数量</td>
                <td style="width:100px">税率%</td>
                <td style="text-align: right">含税单价(元)</td>
                <td style="text-align: right">税额(元)</td>

                <td style="text-align: right">出库数量</td>
              </tr>
              <tr v-for="(Subitem, index) in order" :key="index">
                <td>{{ Subitem.cInvCode }}</td>
                <td>
                  {{ Subitem.cInvName }}
                </td>
                <td style="text-align: right">{{ Subitem.iQuantity }}</td>
                <td>
                  {{
                    Subitem.iTaxRate ? Subitem.iTaxRate + "%" : Subitem.iTaxRate
                  }}
                </td>

                <td style="text-align: right">
                  {{
                    Subitem.iTaxUnitPrice
                      ? Subitem.iTaxUnitPrice
                          .toFixed(2)
                          .replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&,")
                      : Subitem.iTaxUnitPrice
                  }}
                </td>

                <td style="text-align: right">
                  {{
                    Subitem.iTax
                      ? Subitem.iTax
                          .toFixed(2)
                          .replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&,")
                      : Subitem.iTax
                  }}
                </td>

                <td style="text-align: right">
                  {{ Subitem.foutquantity }}
                </td>
              </tr>
            </tbody>
          </table>
        </van-tab>
        <van-tab title="发货信息"
          ><table style="width:1100px">
            <tbody>
              <tr>
                <td width="120px">单据类型</td>

                <td width="120px">发货单号</td>
                <td width="100px">发货日期</td>
                <td width="120px">业务类型</td>

                <td style="width:200px">仓库</td>
                <td style="width:200px">产品名称</td>
                <td width="120px">销售部门</td>
                <td style="width:80px">销售类型</td>

                <td width="120px" style="text-align: right">发货数量</td>
              </tr>
              <tr v-for="(item, index) in delivergoods" :key="index">
                <td>{{ item.cvouchname }}</td>
                <td>{{ item.cdlcode }}</td>
                <td>
                  {{ item.ddate }}
                </td>
                <td>
                  {{ item.cbustype }}
                </td>
                <td>{{ item.cwhname }}</td>
                <td>
                  {{ item.cinvname }}
                </td>

                <td>
                  {{ item.cdepname }}
                </td>

                <td>
                  {{ item.cstname }}
                </td>

                <td style="text-align: right">
                  {{ item.iquantity }}
                </td>
              </tr>
            </tbody>
          </table></van-tab
        >
        <van-tab title="出库信息">
          <table style="width:1000px">
            <tbody>
              <tr>
                <td width="120px">订单号</td>
                <td width="100px">出库日期</td>
                <td style="width:100px">批号</td>
                <td style="width:200px">仓库</td>
                <td>产品名称</td>

                <td style="text-align: right">发货数量</td>
              </tr>
              <tr v-for="(item, index) in Issue" :key="index">
                <td>{{ item.cSOCode }}</td>
                <td>
                  {{ item.ddate }}
                </td>
                <td>
                  {{ item.cbatch }}
                </td>
                <td>{{ item.cwhname }}</td>
                <td>
                  {{ item.cinvname }}
                </td>

                <td style="text-align: right">
                  {{ item.iquantity }}
                </td>
              </tr>
            </tbody>
          </table>
        </van-tab>
        <van-tab title="发票信息">
          <table style="width:700px">
            <tbody>
              <tr>
                <td width="120px">产品编码</td>
                <td width="180px">产品名称</td>
                <td style="width:120px">数量</td>
                <td style="text-align: right" width="150px">销售单价(元)</td>
                <td style="text-align: right" width="120px">销售金额</td>
              </tr>
              <tr v-for="(item, index) in invoice" :key="index">
                <td>{{ item.cinvcode }}</td>
                <td>{{ item.cinvname }}</td>

                <td>
                  {{ item.iquantity }}
                </td>
                <td style="text-align: right">
                  {{
                    item.itaxunitprice
                      ? Number(item.itaxunitprice)
                          .toFixed(2)
                          .replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&,")
                      : item.itaxunitprice
                  }}
                </td>

                <td style="text-align: right">
                  {{
                    item.isum
                      ? Number(item.isum)
                          .toFixed(2)
                          .replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&,")
                      : item.isum
                  }}
                </td>
              </tr>
            </tbody>
          </table>
        </van-tab>
        <van-tab title="收款信息">
          <table style="width:1700px">
            <tbody>
              <tr>
                <td width="120px">发货日期</td>
                <td width="260px">客户名称</td>
                <td style="width:260px">银行名称</td>
                <td style="width:260px">银行账号</td>
                <td width="100px">操作员</td>
                <td width="100px">业务员</td>
                <td width="100px">审核人</td>
                <td width="100px">核销人</td>
                <td width="100px">结算方式</td>
                <td width="100px" style="text-align: right">收款金额(元)</td>
                <td>摘要</td>
              </tr>
              <tr v-for="(item, index) in Collection" :key="index">
                <td>
                  {{
                    item.dVouchDate
                      ? item.dVouchDate.substring(0, 10)
                      : tem.dVouchDate
                  }}
                </td>
                <td>
                  {{ item.cCusAbbName }}
                </td>
                <td>
                  {{ item.cBank }}
                </td>
                <td>
                  {{ item.cBankAccount }}
                </td>

                <td>{{ item.cOperator }}</td>
                <td>
                  {{ item.cPersonName }}
                </td>

                <td>
                  {{ item.cCheckMan }}
                </td>
                <td>
                  {{ item.cCancelMan }}
                </td>

                <td>
                  {{ item.cSSName }}
                </td>
                <td style="text-align: right">
                  {{
                    item.iAmount
                      ? Number(item.iAmount)
                          .toFixed(2)
                          .replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, "$&,")
                      : item.iAmount
                  }}
                </td>
                <td>
                  {{ item.cDigest }}
                </td>
              </tr>
            </tbody>
          </table>
        </van-tab>
      </van-tabs>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      active: 0,
      order: [], //订单详情
      delivergoods: [], //发货
      Issue: [], //出库
      invoice: [], //发票
      Collection: []
    };
  },
  methods: {
    init() {
      this.show = true;
    },
    openForm(Subitem) {
      this.init();
      this.getorderList(Subitem);
      this.getdelivergoods(Subitem);
      this.getIssue(Subitem);
      this.getinvoice(Subitem);
      this.getCollection(Subitem);
    },
    //订单
    getorderList(Subitem) {
      this.http
        .post("/OrderManagement/SO_SODetails/GetDataList", {
          PageIndex: 1,
          PageRows: 9999,
          SortField: "AutoID",
          SortType: "desc",
          Search: {
            Condition: "cSOCode",
            Keyword: Subitem.cSOCode
          }
        })
        .then(resJson => {
          this.order = resJson.Data;
        });
    },
    getdelivergoods(Subitem) {
      this.http
        .post("/OrderManagement/SO_SOMain/GetSa_SaleOrderAscendDis", {
          PageIndex: 1,
          PageRows: 9999,

          Search: [
            {
              Condition: "cSOCode",
              Keyword: Subitem.cSOCode
            }
          ]
        })
        .then(resJson => {
          this.delivergoods = resJson.Data;
        });
    },
    getIssue(Subitem) {
      this.http
        .post("/OrderManagement/SO_SOMain/GetSa_SaleOrderAscendOut", {
          PageIndex: 1,
          PageRows: 9999,

          Search: [
            {
              Condition: "cSOCode",
              Keyword: Subitem.cSOCode
            }
          ]
        })
        .then(resJson => {
          this.Issue = resJson.Data;
        });
    },
    getinvoice(Subitem) {
      this.http
        .post("/OrderManagement/SO_SOMain/GetSa_SaleOrderAscendBill", {
          PageIndex: 1,
          PageRows: 9999,

          Search: [
            {
              Condition: "cSOCode",
              Keyword: Subitem.cSOCode
            }
          ]
        })
        .then(resJson => {
          this.invoice = resJson.Data;
        });
    },
    getCollection(Subitem) {
      this.http
        .post("/OrderManagement/SO_SOMain/GetSA_ProcessGathering", {
          PageIndex: 1,
          PageRows: 9999,

          Search: [
            {
              Condition: "cSOCode",
              Keyword: Subitem.cSOCode
            }
          ]
        })
        .then(resJson => {
          this.Collection = resJson.Data;
        });
    },

    onClickLeft() {
      this.show = false;
    }
  }
};
</script>

<style>
table {
  border-right: 1px solid #804040;
  border-bottom: 1px solid #804040;
  border-collapse: collapse;
}

table td {
  border-left: 1px solid #804040;
  border-top: 1px solid #804040;
  padding: 3px;
}
</style>
